<template>
	<div class="wrapper">
		<Title></Title>
		<div class="content" v-if="all.length">
			<div class="site" v-for="(item,i) in all" ref="site" :key="i" @click="toggle(item)">
				<p>
					<span v-text="item.consignee"></span>
					<span v-text="item.phone"></span>
					<span v-if="item.activate" v-text="` [默认]`"></span>
				</p>
				<div v-text="item.site"></div>
				<div class="del" >
					<span v-text="`删除`" @click="del(item,i)"></span>
				</div>
			</div>
		</div>
		<div class="add">
			<router-link to="/addsite" v-text="`新建地址`"></router-link>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
    import Title from "../components/Title";
    import {createNamespacedHelpers} from "vuex";
    const {mapState} = createNamespacedHelpers("order");//mapState放在计算属性//const声明常量
    export default {
        inject:["reload"],
        components: {//注册组件不然不能使用
            Title
        },
	    data(){
            return {}
	    },
        computed:{
            ...mapState(["all"])
        },
        methods:{
            del(item,i){
                this.$store.dispatch("site/del",item.id);
                this.$refs.site[i].remove();
            },
            toggle(item){//切换默认地址
                if(item.activate === null){//如果用户点击的这个地址不是默认
                    item.toggle = true;
                    this.$store.dispatch("site/saveSite",item);
                    if(this.$route.query.user){//在个人中心设置地址的话
                        setTimeout(()=>{
                            this.reload();//刷新页面
                        },200);
                    }else{//在订单页面设置地址的话跳转到订单
                        setTimeout(()=>{this.$router.push({path:"/order"})},100)
                    }
                }
            },
            getUser(){//获取用户名
                let cookie = document.cookie.split(";");
                let user = null;
                if(cookie.length){
                    for(let i=0;i<cookie.length;i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo"){
                            user = arr[1];
                        }
                    }
                }
                return user;
            },
        },
	    created(){
			this.$store.dispatch("order/site",this.getUser())
	    },
	    mounted(){

	    },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.wrapper
		width 100%
		height 100%
		.content
			width 100%
			height 100%
			padding-top .9rem
			padding-bottom 1.2rem
			overflow-y auto
			.site
				background: #fff url("../assets/bd1.png") 0 0 repeat-x;
				background-size: .52rem .08rem;
				padding: .26rem .4rem
				padding-top: .4rem;
				padding-bottom: .3rem;
				position: relative
				p
					font-size: .3rem
					font-weight: 700
					color: #3c3c3c
					margin-bottom: .2rem
				.del
					text-align right
					width 100%
					color #ff6700
		.add
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 1;
			a
				display: block;
				outline: 0;
				background: #ff6700;
				color: #fff;
				text-align: center;
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				font-size: .28rem;
</style>